<template>
  <view class="coach-container" v-if="coach">
    <view class="coach-header">
      <navbar :title="school.shortName" :hide="page==='home'"></navbar>
      <view class="coach-info-container">
        <view class="avatar"></view>
        <view class="coach-info">
          <view class="flex v">
            <view class="coach-name">{{ coach.name }}</view>
            <view class="coach-desc">教龄12年 学员12个</view>
          </view>
        </view>
        <view class="coach-btn">学车询价</view>
      </view>
    </view>
    <view class="school-fields">
      <view class="group-header">
        <view class="group-label">最近的场地</view>
        <view class="more">全部场地</view>
      </view>
      <view class="field-container" v-for="field in fields" :key="field.id">
        <view class="cover" :style="{'background-image':'url('+field.logoImg+')'}"></view>
        <view class="field-info">
          <view class="flex">
            <view class="field-name">{{ field.name }}</view>
            <view class="field-subjects">{{ field.subjects }}</view>
          </view>
          <view class="flex">
            <view class="field-address">{{ field.address }}但是梵蒂冈电饭锅电饭锅放大</view>
            <view class="field-distance">{{ field.distance || 20 }}km</view>
          </view>
          <view class="f1"></view>
          <view class="field-type">{{ field.typeStr }}</view>
        </view>
      </view>
    </view>
    <view class="course-group">
      <view class="group-header">
        <view class="group-label">热门班型</view>
        <view class="more">全部班型</view>
      </view>
      <view class="flow-body">
        <view class="course-container">
          <view class="cover"></view>
          <view class="course-name">手动挡普通班</view>
        </view>
        <view class="course-container">
          <view class="cover"></view>
          <view class="course-name">手动挡普通班</view>
        </view>
      </view>
    </view>
    <view class="contact-footer" :style="{bottom: bottom+'rpx'}">
      <view class="icon-btn">
        <image class="icon" src="@/static/tabbar/jiaxiao.png"></image>
        <view class="text">打电话</view>
      </view>
      <view class="icon-btn">
        <image class="icon" src="@/static/tabbar/jiaxiao.png"></image>
        <view class="text">加微信</view>
      </view>
      <view class="xunjia-btn">学车询价</view>
    </view>
  </view>
</template>

<script>
import {coachApi} from "@/api";
import Navbar from "@/components/navbar.vue";
import {mapGetters} from 'vuex'

export default {
  components: {Navbar},
  props: ['coachId', 'page'],
  data() {
    return {
      school: null,
      coach: null,
      fields: []
    }
  },
  computed: {
    ...mapGetters(['platform']),
    bottom() {
      // h5在底部导航页面渲染有问题，兼容一下
      if (this.platform === 'web') {
        if (this.page === 'home') {
          return 90
        }
      }

      return 0
    }
  },
  async created() {
    const res = await coachApi.info(this.coachId)
    this.school = res.data.data.school
    this.coach = res.data.data.coach
    this.fields = res.data.data.fields
  },
  methods: {}
}
</script>

<style scoped lang="scss">
page {
  background-color: #f9f9f9;
}

.coach-container {
  background-color: #f9f9f9;
  padding-bottom: 200rpx;

  .coach-header {
    background-color: #fff;
    padding-bottom: 20rpx;
    margin-bottom: 30rpx;

    .coach-info-container {
      border: 1px solid #f0f0f0;
      background-color: #fcfcfc;
      border-radius: 20rpx;
      margin: 30rpx;
      display: flex;
      align-items: center;

      .avatar {
        width: 98rpx;
        height: 98rpx;
        background-color: #eee;
        border-radius: 49rpx;
        margin: 32rpx 35rpx 30rpx 35rpx;
      }

      .coach-info {
        flex: 1;
        display: flex;

        .coach-name {
          font-size: 16px;
          font-weight: bold;
          color: #000;
        }

        .coach-desc {
          margin-top: 6rpx;
          font-size: 13px;
          color: #909090;
        }
      }

      .coach-btn {
        background: #0095FE;
        border-radius: 32rpx;
        height: 64rpx;
        font-size: 13px;
        font-weight: bold;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        padding: 0 32rpx;
        margin-right: 30rpx;
      }
    }
  }

  .group-header {
    display: flex;

    .group-label {
      font-size: 16px;
      font-weight: bold;
      color: #000;
      margin-left: 30rpx;
      margin-top: 30rpx;
      flex: 1;
    }

    .more {
      margin-top: 34rpx;
      margin-right: 30rpx;
      color: #959595;
    }
  }

  .course-group {
    background-color: #fff;

    .group-label {
      margin-bottom: 20rpx;
    }

    .flow-body {
      flex-wrap: wrap;
      display: flex;
      padding-left: 10rpx;
    }

    .course-container {
      margin-left: 20rpx;
      padding-bottom: 30rpx;

      .cover {
        width: 340rpx;
        height: 200rpx;
        background-color: #eee;
        border-top-left-radius: 20rpx;
        border-top-right-radius: 20rpx;
      }

      .course-name {
        margin-top: 10rpx;
        color: #000;
      }
    }
  }

  .school-fields {
    background-color: #fff;
    padding-top: 1px;
    margin-bottom: 30rpx;

    .field-container {
      padding: 30rpx;
      display: flex;

      .field-info {
        width: 490rpx;
        display: flex;
        flex-direction: column;
      }

      .cover {
        width: 180rpx;
        height: 140rpx;
        background-position: center;
        background-size: cover;
        border-radius: 10rpx;
        margin-right: 30rpx;
      }

      .field-name {
        font-size: 15px;
        color: #232323;
        font-weight: bold;
        flex: 1;
      }

      .field-subjects {
        color: #000;
        font-weight: bold;
      }

      .field-address {
        font-size: 12px;
        color: #909090;
        margin-top: 6rpx;
        flex: 1;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }

      .field-type {
        margin-top: 6rpx;
      }

      .field-distance {
        margin-top: 6rpx;
        color: #5A5A5A;
      }
    }
  }

  .contact-footer {
    box-shadow: 0 4upx 20upx 0 rgba(0, 0, 0, 0.1);
    height: 120rpx;
    background-color: #fff;
    position: fixed;
    bottom: 0;
    z-index: 100;
    left: 0;
    right: 0;
    display: flex;
    padding: 0 30rpx;

    .icon-btn {
      width: 120rpx;
      display: flex;
      align-items: center;
      flex-direction: column;

      .icon {
        margin-top: 20rpx;
        width: 50rpx;
        height: 50rpx;
      }

      .text {
        font-size: 12px;
        margin-bottom: 25rpx;
      }
    }

    .xunjia-btn {
      height: 80rpx;
      margin-left: 30rpx;
      margin-top: 20rpx;
      color: #fff;
      flex: 1;
      display: flex;
      align-items: center;
      font-size: 16px;
      justify-content: center;
      border-radius: 45rpx;
      background-color: #0D94FF;
    }
  }
}

</style>
